<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>我的提问</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../common/mui/mui.css" rel="stylesheet" />
		<link href="../common/css/yahei.css" rel="stylesheet" />
		<link href="../common/css/webfont.css" rel="stylesheet" />
		<link href="../common/css/iconfont.css" rel="stylesheet" />
		<link href="../common/css/app.css" rel="stylesheet" />
		<link href="../dependence/teach/css/teachPublic.css" rel="stylesheet" />
		<style type="text/css">
			.searchArea{
				height: var(--searchHeight);
			}
			.mui-scroll-wrapper{
				top: calc(var(--searchHeight) + 44px);
			}
			#UL > .mui-table-view-cell{
				display: flex;
				flex-wrap: wrap;
				margin-top: 0;
			}

			.queTitle{
				font-size: var(--size15);
				width: 100%;
				line-height: 1.5;
				margin-bottom: var(--size8);
				font-weight: 600;
			}
			.mui-table-view-cell .ansArea{
				margin: var(--size10) 0 0;
				width: 100%;
				background-color: #FBFBFB;
			}
			.queDate{
				color: gray;
				width: 100%;
				font-size: var(--size12);
			}
			.queContent{
				width: 100%;
				font-size: var(--size14);
				color: #555555;
				line-height: 1.5;
			}
			.ansArea .queContent{
				line-height: 1.7;
			}
			.queContent span{
				font-weight: bold;
			}
			img{
				max-width: 100%;
				padding: var(--size10) 0;
			}
		</style>
	</head>

	<body class="YaHei">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">我的提问</h1>
		</header>
		<div class="mui-content">
			<div class="searchArea">
				<div class="mui-input-row mui-search">
					<input id="search" type="search" class="mui-input-clear" placeholder="搜索"/>
				</div>
			</div>
			<div id="wrapper" class="mui-scroll-wrapper folderType">
				<div id="scroll" class="mui-scroll mui-scroll-phone">
					<ul id="UL" class="mui-table-view"></ul>
				</div>
			</div>
		</div>
		<script src="../common/mui/mui.js"></script>
		<script src="../common/mui/mui.pullToRefresh.js"></script>
		<script src="../common/mui/mui.pullToRefresh.material.js"></script>
		<script src="../common/js/globalSet.js"></script>
		<script src="../common/js/jquery-3.4.1.min.js"></script>
		<script src="../common/js/DHCWebService.js"></script>
		<script src="../common/js/app.js"></script>
		
<script>
(function($) {
	var quePull,sourceData;
	var start = 0,Limit = 20;
	var nurseid = ''
	var pulling = false;
	$.init();
	$.plusReady(function() {
		baseSetup();
	})
	if (!mui.os.plus) {
		baseSetup()
	}
	function getQueData(){
		if (pulling) {
			quePull.endPullUpToRefresh()
			return;
		}
		pulling = true
		var pdict = {'type':'Q','input':$('#search')[0].value,'loginID':nurseid,'start':start,'limit':Limit}
		var paramDict = {'method':'web.INMTeaComm:FindDrillVideoInfoList','params':JSON.stringify(pdict),'type':'RecQuery'}
		//console.log(JSON.stringify(pdict))
		$.DHCWebService(paramDict, function(result) {
			//console.log(JSON.stringify(result))
			var dataArr = result.data
			if (!dataArr) {
				quePull.endPullUpToRefresh();
				pulling = false
				return;
			}
			
			if (start == 0) {
				sourceData = dataArr;
			}else{
				sourceData = sourceData.concat(dataArr)
			}
			if (dataArr.length < Limit) {
				quePull.endPullUpToRefresh(true);
			}else{
				quePull.endPullUpToRefresh();
			}
			updateUI(dataArr)
			start += dataArr.length;
			pulling = false
		}, function(errorStr) {
		 	quePull.endPullUpToRefresh();
		 	pulling = false
		});
	}
	function updateUI(dataArr){
		var UL = document.getElementById("UL");
		if (start == 0) {
			UL.innerHTML = ''
		}
		var oldCount = UL.querySelectorAll('li').length
		for(var i = 0; i < dataArr.length; i++){
			var html = '<div class="queTitle">'+dataArr[i]['context']+'</div>'+
				//'<div class="queContent">协助患者进食、水中易出现的问题有哪些，是不是可以提前预防<img src="'+imgSrc+'">，麻烦老师回答一下。</div>'+
				'<div class="queDate">'+dataArr[i]['infoTime']+'</div>'+
				'<div class="ansArea">'+
					'<div class="queContent"><span>[回答]</span>'+dataArr[i]['Answer']+
					//'<div class="queDate"> 王娜&nbsp;&nbsp;&nbsp;2021-07-11 10:40:54</div>'+
				'</div>';
			var newLi = document.createElement('li')
			newLi.setAttribute('class','mui-table-view-cell')
			if (start == 0 && i == 0) {
				newLi.classList.add('dhc-active')
			}
			newLi.innerHTML = html
			UL.appendChild(newLi)
		}
	}
	
	function baseSetup() {
		$('.mui-scroll-wrapper').scroll({
			bounce: true,
			indicators: false, //是否显示滚动条
		});
		var perInfo = app.getState()
		nurseid = perInfo['loginID']
		mui("body").on("tap", ".searchArea .mui-icon-clear", function() {
			if ($('#search')[0] != "") {
				$('#search')[0].value = ""
			}
			resetQueRefresh()
		});
		var search =  $('#search')[0];
		search.addEventListener('input',function(){
			resetQueRefresh()
		});
		var scroll = $('#scroll')[0];
		quePull = $(scroll).pullToRefresh({
			up: {
				callback: function() {
					getQueData()
				}
			}
		});
		getQueData();	
	}
	function resetQueRefresh(){
		start = 0;
		sourceData = []
		if (quePull) {
			quePull.refresh(true)
		}
		getQueData();
		$('#wrapper').scroll().scrollTo(0,0,100);
	}
})(mui);

</script>
	</body>

</html>
